<template>
  <div style="height: 100%;display: flex">
    <div class="list-page" style="padding:10px;width: 30%">
      <!-- 操作组 -->
      <div class="header-bar">
        <ButtonGroup class="float-left">
          <Button icon="h-icon-plus" @click="add">添加</Button>
          <Button :disabled="selects.length!=1" icon="h-icon-edit" @click="editFirst">修改</Button>
          <Poptip :isdisabled="selects.length==0" class="h-btn" content="确定删除所选记录？" @confirm="del">
            <Button icon="h-icon-trash">删除</Button>
          </Poptip>
          <Button icon="h-icon-refresh" @click="table.load()"></Button>
        </ButtonGroup>
      </div>
      <div class="list">
        <Table :datas="table.data" :loading="table.loading" @trdblclick="edit" @select="selected" checkbox>
          <TableItem title="角色">
            <template slot-scope="{data}">
              <span class="link" @click="showRole(data)"
                    style="display: inline-block;width: 100%">{{ data.name }}</span>
            </template>
          </TableItem>
          <TableItem title="编码" prop="sn"></TableItem>
          <TableItem title="类型" prop="roleType" dict="BranchType"></TableItem>
        </Table>
      </div>
    </div>
    <div class="list-page" style="padding:10px;flex:1;">
      <Tabs :datas="tabs" v-model="selectedTab"></Tabs>
      <RolePermission :role="currentRole" :allPermission="allPermission" v-if="selectedTab=='permission'"/>
      <RoleUser :role="currentRole" v-else-if="selectedTab=='user'"/>
      <RoleBranch :role="currentRole"  v-else-if="selectedTab=='branch'"/>
    </div>
    <RoleDialog ref="dlg" @change="reload">
    </RoleDialog>
  </div>
</template>
<script>
import {DataSource, ajax, util} from 'framework'
import RoleDialog from './roleDialog'
import RolePermission from "./rolePermission";
import RoleUser from "./roleUser";
import RoleBranch from "./roleBranch";

let table = new DataSource('role/list')
export default {
  name: "Role",
  components: {RoleUser, RolePermission, RoleBranch,RoleDialog},
  data() {
    return {
      showSearch: false,
      table: table,
      selects: [],
      allPermission: [],
      currentRole: null,
      tabs: {
        permission: '权限配置',
        user: '用户配置',
        branch: '机构配置'
      },
      selectedTab: 'permission'
    }
  }, mounted() {
    table.load()
    ajax.get("role/all_permission").then(r => {
      this.allPermission = r.data
    })
  },
  methods: {
    reload() {
      this.selects = []
      table.load()
    },
    search() {
      this.selects = []
      table.pagination.page = 1;
      table.load()
    },
    rowSelect(v) {
      this.selectRow = util.fields(v, 'sn')
    },
    selected(v) {
      this.selects = v.map(it => util.fields(it, 'sn'))
    },
    resetSerarch() {
      table.params = {}
      this.reload()
    },
    add() {
      this.$refs.dlg.show()
    },
    editFirst() {
      if (this.selects.length == 0) {
        return;
      }
      this.edit(this.selects[0])
    },
    edit(v) {
      this.$refs.dlg.show(util.fields(v, 'sn'))
    },
    del() {
      ajax.post('role/delete', this.selects).then(r => {
        this.reload()
      })
    },
    showRole(dt) {
      this.currentRole = dt
    }
  }
}
</script>
